<template>
   <div class="items">
        <div class="png">
         <img v-if="item.head_img" :src="$axios.defaults.baseURL+item.head_img" alt="" class="photo">
         <img v-else src="@/assets/logo.png" alt="" class="photo">
        </div>
        <div class="info">
          <div class="message">
            <span class="message-info">{{item.nickname}}</span>
            <p class="time" v-if="item.create_date">{{item.create_date.split('T')[0]}}</p>
            <p class="time" v-else>2020-8-13</p>
          </div>
          <button class="btn-focus" @click="CancelBtn">取消关注</button>
        </div>
    </div>
</template>

<script>
export default {
    
    props:['item'],
    methods:{
      CancelBtn(key){
        this.$emit('clicked')
      }
    }
}
</script>

<style lang="less" scoped>

.items {
    display: flex;
    height: 80/360 * 100vw;
    justify-content: space-between;
    border-bottom: 1/360 * 100vw solid #e4e4e4;
    .png {
      width: 80/360 * 100vw;
      .photo {
          display: block;
          width: 50/360*100vw;
          height: 50/360*100vw;
          margin-left: 10/360*100vw;
          margin-top: 15/360*100vw;
          background-color: #b3b3b3;
          border-radius: 50%;
      }
    }
    .info {
      display: flex;
      width: 280/360 * 100vw;
      justify-content: space-between;
      margin-top: 20/360*100vw;
      .message {
          font-size: 14/360*100vw;
          .time {
              color:#afafaf
          }
      }
      .btn-focus {
          width: 80/360*100vw;
          height: 30/360*100vw;
          border-radius: 15/360*100vw;
          border: transparent;
      }
    }

  }
</style>